<template>
  <div class="cascader-power-tree-dom-list-box" v-loadmore="loadmoreOptions">
    <div class="tree-dom-list-item" v-for="item in page.list" :key="item.key">
      <el-checkbox v-model="checkObj[item.key]" @change="chooseItem($event, item)"></el-checkbox>
      <div class="flex-x al-c flex-1 tree-dom-list-item-content" :class="[chooseObj[item.key] ? 'choosed-item' : '']" @click="toNext(item)">
        <slot>
          <span class="overHideCon-1 mar-l-8 flex-1">{{ item.label }}</span>
        </slot>

        <i v-if="item.haveChild" class="iconfont icon-right1" :class="[nowShowIndex === item.key ? 'c-primary' : '']"></i>
      </div>
    </div>
    <div class="flex-x al-c data-tips" v-if="isMounted">
      {{ loading ? $t('common.base.loading') : !page.list.length ? `${$t('common.base.noData')}` : !page.hasNextPage ? `${$t('common.base.tip.noMoreData')}` : `${$t('common.base.tip.loadMore')}` }}
    </div>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted, ref, watch, nextTick } from 'vue';
import { initBaseTreeListItem } from '@src/component/compomentV2/cascaderPower/common';
import Page from '@model/Page';
import { debounce, cloneDeep } from 'lodash';
export default defineComponent({
  name: 'CascaderPowerTreeDomListBox',
  emits: ['nextList'],
  props: {
    domKey: {
      type: [String, Number, null],
      default: 0,
    },
    domIndex: {
      type: Number,
      default: 0,
    },
    pathArr: {
      type: Array,
      default: () => [],
    },
    rootOptions: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, { emit }) {
    const page = ref(new Page({ pageSize: 20 }));
    const checkObj = ref({});
    const chooseObj = ref({});
    function setcheckObj(val) {
      checkObj.value = cloneDeep(val);
    }
    function setchooseObj(val) {
      chooseObj.value = cloneDeep(val);
    }
    const loading = ref(true);
    const rootProps = computed(() => props.rootOptions);
    const nowShowIndex = computed(() => {
      return props.pathArr[props.domIndex + 1]?.key;
    });

    const loadmoreOptions = computed(()=>{
      return {
        disabled: !page.value.hasNextPage,
        distance: 100,
        callback: loadMore,
      }
    });
    const nowPathKeyArr = computed(() => {
      let arr_ = [];
      for (let i = 0; i < props.pathArr.length; i++) {
        const item = props.pathArr[i];
        arr_.push(item);
      }
      return arr_;
    });
    watch(
      () => props.domKey,
      value => {
        nextTick(() => {
          getDataList(true);
        });
      },
      {
        immediate: true,
        deep: true,
      }
    );
    let isMounted = ref(false);
    function getDataList(refresh = false) {
      if (!page.value.hasNextPage && !refresh) return;
      if (refresh === true) {
        page.value.list = [];
        page.value.pageNum = 1;
      }
      const { getListFnc } = rootProps.value;
      const { pageSize, pageNum, list } = page.value;
      if (getListFnc) {
        loading.value = true;
        getListFnc({ pageSize, pageNum, params: { key: props.domKey } }).then(res => {
          if (res.status === 0) {
            const res_ = res.data || res.result;
            let page_ = new Page(res_);
            let list_ = initBaseTreeListItem(res_.list, nowPathKeyArr.value, rootProps.value);
            page_.list = [...list, ...list_];
            page_.pageNum++;
            page_.pageSize = 20;
            page.value = page_;
          }
          loading.value = false;
          nextTick(() => {
            isMounted.value = true;
          });
        });
      }
    }
    function toNext(i) {
      const { key, label, haveChild } = i;
      if (!haveChild) return console.log('haveChild is false');
      emit('nextList', { key, index: props.domIndex, label });
    }

    const loadMore = debounce(function () {
      if (!isMounted.value) return console.log('not mounted');
      getDataList(false);
    }, 500);
    function chooseItem(e, i) {
      emit('chooseItem', i);
    }
    onMounted(() => {});
    return {
      rootProps,
      page,
      toNext,
      loading,
      getDataList,
      chooseItem,
      nowShowIndex,
      loadMore,
      chooseObj,
      checkObj,
      setchooseObj,
      setcheckObj,
      isMounted,
      loadmoreOptions,
    };
  },
});
</script>
<style lang="scss" scoped>
@import './listBox.scss';
</style>
